<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/css/index.css"/>
    <script src="assets/js/js/jquery.js"></script>
    <title>index</title>
    <style type="text/css">
        .banner {
            width: 100%;
            height: 400px;
            background: url(assets/img/r.jpg) no-repeat 100% 100%;
            background-size: 100% 100%;
        }

        .font {
            width: 90%;
            text-align: center;
            color: #fff;
            line-height: 60px;
            font-size: 20px;
            padding-top: 20px;
        }

        .font h1 {
            word-spacing: 20px;
            letter-spacing: 10px;
            font-size: 50px;
        }

        .fontP {
            text-align: center;
            color: #fff;
            line-height: 60px;
            font-size: 20px;
            padding-top: 20px;
        }

        .forms {
            width: 90%;
            margin: 0 auto;
        }

        .form {
            background-color: #D6CCC5;
            text-align: center;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 60px;
            width: 30%;
            padding: 0 20px;
            margin: 30px auto;
        }

        .form input {
            border-radius: 5px;
            display: block;
            height: 30px;
            width: 350px;
            border: none;
            padding-left: 10px;
            font-weight: bold;
        }

        .form button {
            width: 100px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background: url(assets/img/button.png) no-repeat 10px 6px;
            background-size: 15px 15px;
            background-color: #F19323;
            font-weight: bold;
        }

        /* banner完 */
        .main {
            width: 100%;
            height: 400px;
            background: url(assets/img/wns.png) no-repeat 100% 100%;
            background-size: 100%;
        }

        .main p {
            font-size: 40px;
            font-weight: bold;
            color: #fff;
            line-height: 60px;
            width: 90%;
            margin: 0 auto;
            padding-top: 100px;
            text-align: center;
            word-spacing: 15px;
            letter-spacing: 5px;
        }

        /* main完 */
        @media screen and (max-width: 940px) {
            .form {
                flex-wrap: wrap;
                padding: 20px 20px;
                margin: 0px auto;
            }

            .fontP {
                font-size: 15px;
                padding-top: 0px;
            }
        }

        @media screen and (max-width: 800px) {
            .form {
                width: 40%;
                padding: 20px 20px;
                margin: 0px auto;
            }

            .font {
                line-height: 50px;
                padding-top: 10px;
            }

            .fontP {
                font-size: 15px;
                padding-top: 0px;
            }
        }

        @media screen and (max-width: 650px) {
            .form {
                width: 40%;
                padding: 20px 40px;
                margin: 5px auto;
            }

            .font {
                line-height: 40px;
                padding-top: 10px;
            }

            .font h1 {
                word-spacing: 10px;
                letter-spacing: 10px;
                font-size: 40px;
            }

            .fontP {
                font-size: 15px;
                padding-top: 0px;
            }
        }
    </style>
</head>
<body>
<div id="bigBox">
    <div th:include="pub_head"></div>
    <div class="banner1">
        <div class="center ways">
            <div class="way" th:each="user:${modules[3].banners}">
                <a th:href="@{/details(id=${user.id})}">
                <img th:src="${user.imgUrl1}">
                </a>
                <h3>[[${user.title}]]</h3>
                <h3 class="wayF2">[[${user.description}]]</h3>
                <hr/>
                <div class="wayB">
                    <p class="wayF">[[${user.content}]]</p>
                    <p class="wayF1">[[${user.content1}]]<span>[[${user.remark}]]</span></p>
                </div>

            </div>
            <!--<div class="way">
                <img src="assets/img/home1.png">
                <h3 class="wayF2">Civita di Bagnoregio,</h3>
                <hr/>
                <div class="wayB">
                    <p class="wayF">April 14, 2015</p>
                    <p class="wayF1">Uploaded by <span>John Doe</span></p>
                </div>
            </div>
            <div class="way">
                <img src="assets/img/home1.png">
                <h3>Civita di Bagnoregio,</h3>
                <h3 class="wayF2">Italia</h3>
                <hr/>
                <div class="wayB">
                    <p class="wayF">April 14, 2015</p>
                    <p class="wayF1">Uploaded by <span>John Doe</span></p>
                </div>
            </div>-->
        </div>
    </div><!--banner1-->
    <div class="banner2 center">
        <div class="title">[[${modules[6].module.title}]]<span class="hr"></span></div>
        <div class="con">
            <p>[[${modules[6].module.description}]]</p>
        </div>
        <div class="box">
            <div class="boxs" th:each="user:${modules[6].banners}">
                <a th:href="@{/details(id=${user.id})}">
                <div class="img1"><img th:src="${user.imgUrl1}"></div>
                </a>
                <h4>[[${user.title}]]</h4>
                <p>[[${user.description}]]</p>

            </div>
            <!--<div class="boxs">
                <div class="img1"><img src="assets/img/dw.png"></div>
                <h4>Lorem ipsum dolor</h4>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore
                    magna aliquam erat volutpat. Ut wisi enim ad</p>
            </div>
            <div class="boxs">
                <div class="img1"><img src="assets/img/lxr.png"></div>
                <h4>Lorem ipsum dolor</h4>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore
                    magna aliquam erat volutpat. Ut wisi enim ad</p>
            </div>-->
        </div>
        <div class="more">
            <button>MORE</button>
        </div>
    </div><!--banner2-->
    <div class="main">
        <p>Curabitur pharetra sed magna at tincidunt. Maecenas auctor tincidunt ex. Aliquam a vestibulum Donec diam
            ipsum euismod.</p>
    </div><!--main-->
    <div class="banner3 center">
        <div class="title">[[${modules[4].module.name}]]<span class="hr"></span></div>
        <div class="con">
            <p>[[${modules[4].module.description}]]</p>
        </div>
        <div class="boxOne" th:if="${i.index}%4==0" th:each="user,i:${modules[4].banners}">

            <div class="box1" th:each="user5:${#numbers.sequence(i.index,i.index+3)}">
                <a th:href="@{/details(id=${user.id})}">
                <div class="img2"><img th:src="${modules[4].banners[user5].imgUrl2}"></div>
                </a>
                <h4>[[${modules[4].banners[user5].title}]]</h4>
                <p>[[${modules[4].banners[user5].description}]]</p >

            </div>

            <!--<div class="box1">
                <div class="img2"><img src="assets/img/aircraft.png"></div>
                <h4>Henderit Mauris</h4>
                <p>Praesent vestibuluolestie lacus</p>
            </div>
            <div class="box1">
                <div class="img2"><img src="assets/img/aircraft.png"></div>
                <h4>Henderit Mauris</h4>
                <p>Praesent vestibuluolestie lacus</p>
            </div>
            <div class="box1">
                <div class="img2"><img src="assets/img/aircraft.png"></div>
                <h4>Henderit Mauris</h4>
                <p>Praesent vestibuluolestie lacus</p>
            </div>-->
        </div>
        <!--<div class="boxOne">
            <div class="box1">
                <div class="img2"><img src="assets/img/aircraft.png"></div>
                <h4>Henderit Mauris</h4>
                <p>Praesent vestibuluolestie lacus</p>
            </div>
            <div class="box1">
                <div class="img2"><img src="assets/img/aircraft.png"></div>
                <h4>Henderit Mauris</h4>
                <p>Praesent vestibuluolestie lacus</p>
            </div>
            <div class="box1">
                <div class="img2"><img src="assets/img/aircraft.png"></div>
                <h4>Henderit Mauris</h4>
                <p>Praesent vestibuluolestie lacus</p>
            </div>
            <div class="box1">
                <div class="img2"><img src="assets/img/aircraft.png"></div>
                <h4>Henderit Mauris</h4>
                <p>Praesent vestibuluolestie lacus</p>
            </div>
        </div>-->
    </div><!--banner3-->
    <div class="main">
        <p>Curabitur pharetra sed magna at tincidunt. Maecenas auctor tincidunt ex. Aliquam a vestibulum Donec diam
            ipsum euismod.</p>
    </div><!--main-->
    <div class="banner4 center">
        <div class="leftBox">
            <div class="top">
                <div class="left">
                    <img src="assets/img/rome.png">
                </div>
                <div class="right">
                    <h4>[[${modules[14].banners[0].title}]]</h4>
                    <p class="rightP">[[${modules[12].module.remark}]]<span>[[${modules[12].module.title}]]</span> [[${modules[12].module.description}]]</p>
                    <p>
                        Nam libero tempore, cum soluta nobis est eligendi optio cumque quod maxime placeat facere
                        possimus nihil impedit quo minus id quod maxime placeat facere possimus.
                    </p>
                </div>
            </div>
            <div class="bottom">
                <div class="bottomImg" th:each="userA:${modules[14].banners}">
                    <img th:src="${userA.imgUrl1}">
                    <p>[[${userA.title}]]</p>
                </div>
                <!--<div class="bottomImg">
                    <img src="assets/img/door.png">
                    <p>Nam libero tempore, cum soluta nobis</p>
                </div>
                <div class="bottomImg">
                    <img src="assets/img/door.png">
                    <p>Nam libero tempore, cum soluta nobis</p>
                </div>-->
            </div>
        </div>
        <div class="rightBox">
            <div class="rightTitle">
                <h4>[[${modules[5].module.title}]]</h4>
            </div>
            <div class="rightUl">
                <ul>
                    <li> [[${modules[5].banners[0].title}]]</li>
                    <li> [[${modules[5].banners[1].title}]]</li>
                    <li> [[${modules[5].banners[2].title}]]</li>
                    <li> [[${modules[5].banners[3].title}]]</li>
                    <li> [[${modules[5].banners[4].title}]]</li>
                    <li> [[${modules[5].banners[5].title}]]</li>
                    <li> [[${modules[5].banners[6].title}]]</li>
                </ul>
            </div>
        </div>
    </div><!--banner4-->
    <footer>
        <div class="footer">
            <div class="end center">
                <div class="footerL">
                    <img src="assets/img/logo2.png">
                    <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque quod maxime placeat cum soluta
                        nobis facere possimus nihil impedit quo minus id quod maxime placeat facere possimus. est
                        eligendi optio cumquefacere possimus nihil impedit quo minus id quod maxime placeat facere
                        possimus.</p>
                </div>
                <div class="footerC">
                    <div class="footerCTitle">
                        <h4>News Letter</h4>
                    </div>
                    <p>facere possimus nihil impedit quo minus id quod maxime placeat facere possimus. est eligendi</p>
                    <input type="text" v-model="email" placeholder="Enter your email address">
                    <button>SUBCRIBE NOW</button>
                </div>
                <div class="footerR">
                    <div class="footerRTitle">
                        <h4>Flickr Widget</h4>
                    </div>
                    <div class="footerRimg">
                        <img src="assets/img/about.png">
                        <img src="assets/img/boat2.png">
                        <img src="assets/img/bolgtwo.png">
                        <img src="assets/img/home1.png">
                    </div>
                </div>
            </div>
            <div class="endBottom">??2015 - Designed by ZEROTHEME</div>
        </div>
    </footer>
</div><!--bigBox-->


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">
    function searchClick(){
        let val = $("#searchContent").val();
        let a = "http://localhost:8080/pub_head?searchKey="+val;
        location.href =a ;
    }
</script>
</body>
</html>